<template>
  <a-table 
  :columns="columns" 
  :data-source="data" 
  bordered>
    <template #name="{ text }">
      <a>{{ text }}</a>
    </template>
  </a-table>
</template>
<script setup>
    import {reactive} from "vue";
    
    const data = reactive([
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            tel: '0571-22098909',
            phone: 18889898989,
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '2',
            name: 'Jim Green',
            tel: '32',
            phone: 18889898888,
            age: 42,
            address: 'London No. 1 Lake Park',
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            tel: '32',
            phone: 32,
            address: 'Sidney No. 1 Lake Park',
        },
        {
            key: '4',
            name: 'Jim Red',
            age: 18,
            tel: '32',
            phone: 18900010002,
            address: 'London No. 2 Lake Park',
        },
        {
            key: '5',
            name: 'Jake White',
            age: 18,
            tel: '0575-22098909',
            phone: 18900010002,
            address: 'Dublin No. 2 Lake Park',
        },
        ]);
    const columns = reactive([
      {
        title: 'Name',
        dataIndex: 'name',
        align:"center",
        customRender:customRender
      },
      {
        title: 'Age',
        dataIndex: 'age',
         align:"center",
         customRender:customRender
      },
      {
        title: 'Home phone',
        dataIndex: 'tel',
         align:"center",
         customRender:customRender
     
      },
      {
        title: 'Phone',
        dataIndex: 'phone',
     align:"center",
     customRender:customRender
      },
      {
        title: 'Address',
        dataIndex: 'address',
        align:"center",
        customRender:customRender
      },
    ]);
    function customRender({column,text,index,record }){
        // console.log(column)//当前列对象
        // console.log(text)//当前单元格的文本
        // console.log(index)//当前行下标
        // console.log(record)//当前行对象
       
        let item = Object.keys(data[0]);
            //let item = Object.values(data[0]);
       
        let colSpan ;
        if(record[column.dataIndex]== record[item[item.indexOf(column.dataIndex)-1]] ){
            colSpan = 0
        }else{
            let num = 1;
            let type = true;
            for(let itindex in item){
                if(item.indexOf(column.dataIndex)<itindex){
                    if(record[column.dataIndex] == record[item[itindex]] && type){
                        num++
                        column.nice = 1;
                    }else{
                        type =false
                    }
                }
            }
            colSpan = num;
        }
       
        let rowSpan = 1;
        if(index != 0 ){
          if( record[column.dataIndex] == data[index -1][column.dataIndex]){
          rowSpan = 0
        }else{
          let num1 = 1;
          let type1 =true;
          for(let da in data){
            if(index < da){
              if(record[column.dataIndex] == data[da][column.dataIndex] && type1 ){
                // console.log(data[da][column.dataIndex] )
                // console.log(column)
               
                num1 ++
              }else{
                type1 = false
              }
            }
          }
          rowSpan = num1;
        }
        }
       
          if(column.nice == 1 && colSpan>1){
            return {
              children: "",
              props: {
                colSpan,
                rowSpan
              }
           };
          }
        //   console.log(colSpan)
        //   console.log(record)//当前行对象
        // console.log(column)//当前列对象
        // }
        return {
          children: text,
          props: {
            colSpan,
            rowSpan
          }
        };
      
    }

</script>